<template>
  <div class="app-container">
    <h3 align="center" style="font-family: 'Segoe UI Semilight',serif">若兮黑名单列表</h3>
    <div class="filter-container">
      <center><el-checkbox-group id="checkBox" v-model="checkboxVal">
        <el-checkbox label="状态">
          状态
        </el-checkbox>
        <el-checkbox label="执行人">
          执行人
        </el-checkbox>
      </el-checkbox-group></center>
    </div>
    <div>
      <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          @change="getSTime"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
      </el-date-picker>
      <el-input
          placeholder="请输入手机号模糊查询"
          style="width: 400px;margin-left: 10px"
          v-model="queryParam"
          clearable>
      </el-input>
      <el-button style="margin-left: 5px"  class="filter-item" type="primary" icon="el-icon-search" @click="banQuery()">
        搜索
      </el-button>
      <el-button @click="addBlack()" style="margin-left: -2px" class="filter-item" type="warning" icon="el-icon-upload el-icon--right">
        新增黑名单
      </el-button>
      <el-dialog title="新增黑名单" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="手机号码" :label-width="formLabelWidth">
            <el-input placeholder="请输入拉黑的手机号码" style="width: 400px" v-model="form.phoneNumber" autocomplete="off">
              <el-button type="primary" slot="append" icon="el-icon-search" @click="searchUser()">搜索绑定用户</el-button>
            </el-input>
          </el-form-item>
          <div>
            <center><span slot="label">
             <i class="el-icon-message-solid" style="margin:0 25px 0 25px">
                 <span style="padding-left: 8px;font-size: 15px;color: #409EFF">{{tip}}</span>
             </i>
         </span></center>
            <el-switch v-show="isShow"
                style="display: block;margin-left: 200px;margin-top: 40px"
                v-model="value3"
                active-color="#ff4949"
                inactive-color="#13ce66"
                active-text="删除用户"
                inactive-text="保留用户">
            </el-switch>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="danger" @click="confirmAdd()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- user -->
    <el-table
      :key="key"
      stripe
      :default-sort="{prop: 'date', order: 'descending'}"
      :data="banUserDtoList"
      border
      v-loading="loading"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="name" label="序号" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.$index +1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="手机号码" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.phoneNumber }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="date" label="拉黑时间" width="250" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.banDateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit" align="center">
        <template slot-scope="scope">
          {{ scope.row[fruit] }}
          <el-tag v-if="fruit === '状态'" style="width: 80px" type="warning">永久封禁</el-tag>
          <el-tag v-if="fruit === '执行人'" style="width: 100px" type="success">若兮安全团队</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
            <el-popconfirm
                confirm-button-text='移除'
                confirm-button-type='warning'
                cancel-button-text='取消'
                cancel-button-type="success"
                icon="el-icon-info"
                icon-color="red"
                title="这一条黑名单信息确认移除吗？"
                @onConfirm="confirm"
            >
              <el-button type="danger" icon="el-icon-delete" slot="reference" @click="removeById(scope.row.blackId)">移除</el-button>
            </el-popconfirm>
          </template>
      </el-table-column>
    </el-table>
    <div>
      <el-tooltip class="item" effect="dark" content="点我加载更多" placement="top">
        <el-button circle style="margin-left: 500px;margin-top: 20px" :loading="bottomLoading" @click="more()">更多</el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
const defaultFormThead = ['状态']
export default {
  data() {
    return {
    	loading: true,
      queryParam: '',
			dialogFormVisible: false,
			value3: false,
      isShow: false,
      findUser: false,
      tip: '请查询此手机号绑定的用户!',
			currentPage: 1,
      pageSize:5,
			form: {
				phoneNumber: ''
			},
      exact: {
    		phoneNumber: 'phoneNumber'
      },
			formLabelWidth: '120px',
      bottomLoading: false,
      deleteId: '',
      baseUrl: 'http://localhost/admin/userStandard/',
      baseUrl2: 'http://localhost/admin/users/',
      total: 0,
      banUserDtoList: [{
        blackId: '',
        phoneNumber: '',
        banTime: '',
        banDateFormat: ''
      }],
			banUserTempList: [{
				blackId: '',
				phoneNumber: '',
				banTime: '',
				banDateFormat: ''
			}],
      key: 1, // user key
      formTheadOptions: ['状态', '执行人'],
      checkboxVal: defaultFormThead, // checkboxVal
      formThead: defaultFormThead, // 默认表头 Default header
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			value1: '',
			value2: ''
    }
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
      this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the user will be re-rendered each time
    }
  },
  created() {
    this.getBanUserList()
  },
  methods: {
  	confirmAdd() {
			var vm = this
      if (vm.form.phoneNumber === ''){
				vm.$message({
					message: "手机号不可为空! ",
					type: 'warning',
					center: true
				})
      } else if (vm.findUser === false){
				vm.$message({
					message: "请先查询手机号是否绑定用户! ",
					type: 'warning',
					center: true
				})
      }else {
				this.axios({
					method: 'PUT',
					url: vm.baseUrl + 'addBlackUser',
					params: { 'phoneNumber': vm.form.phoneNumber , 'whetherDelete': vm.value3}
				}).then(function(resp) {
					if (resp.data.status === 'ok') {
						vm.$message({
							message: "添加黑名单成功!",
							type: 'success',
							center: true
						})
						vm.dialogFormVisible = false
						vm.total = 0
						vm.currentPage = 1
						vm.getBanUserList()
					}else {
						vm.$message({
							message: "添加黑名单失败!",
							type: 'error',
							center: true
						})
					}
				})
      }
    },
  	addBlack() {
  		this.dialogFormVisible = true
      this.tip = '请查询此手机号绑定的用户!'
      this.form.phoneNumber = ''
      this.isShow = false
      this.value3 = false
			this.findUser = false
    },
		searchUser() {
			const vm = this
      if (vm.form.phoneNumber === ''){
				vm.$message({
					message: "手机号不可为空 ",
					type: 'warning',
					center: true
				})
      } else {
				this.axios({
					method: 'GET',
					url: vm.baseUrl2 + 'exact/' +vm.exact.phoneNumber ,
					params: { 'queryParam': vm.form.phoneNumber }
				}).then(function(resp) {
					if (resp.data.status === 'ok') {
						vm.$message({
							message: "查询到用户名为 " + resp.data.userEntity.username + " 的用户",
							type: 'success',
							center: true
						})
						vm.tip = '该手机号已经绑定用户名为: '+resp.data.userEntity.username+' 的用户'
            vm.findUser = true
						vm.isShow = true
					}else {
						vm.$message({
							message: "没有查询到用户",
							type: 'warning',
							center: true
						})
						vm.tip = '该手机号没有绑定用户!'
						vm.findUser = true
						vm.isShow = false
					}
				})
      }
    },
		getSTime(val) {
			this.value2=val;//这个sTime是在data中声明的，也就是v-model绑定的值
			alert(val)
		},
		more() {
			var vm = this
      if (vm.total - vm.currentPage*vm.pageSize < 1) {
				vm.$message({
					message: "没有更多数据了!",
					center: true
				})
      }else {
				vm.bottomLoading = true
				vm.currentPage = vm.currentPage + 1
				vm.getBanUserList()
      }
    },
		banQuery() {
			var vm = this
      if (vm.queryParam === null || vm.queryParam === ''){
				vm.$message({
					message: '查询条件不可为空!',
					type: 'warning',
					center: true
				})
      } else {
				this.axios({
					method: 'GET',
					url: vm.baseUrl + 'blurQueryBanUser',
					params: { 'queryParam': vm.queryParam }
				}).then(function(resp) {
					const h = vm.$createElement
					if (resp.data.status === 'ok'){
						vm.banUserDtoList = resp.data.banUserDtoList
						vm.$message({
							message: h('p', null, [
								h('span', null, '共检索到 '),
								h('i', { style: 'color: teal' }, resp.data.banUserDtoList.length),
								h('span', null, ' 条数据 ')
							]),
							center: true
						})
          }else {
						vm.$message({
							message: h('p', null, [
								h('span', null, '没有检索到数据'),
							]),
							center: true
						})
          }
				})
      }
    },
		confirm() {
			var vm = this
			this.axios({
				method: 'DELETE',
				url: vm.baseUrl + 'removeBlackUser',
				params: { 'blackId': vm.deleteId }
			}).then(function(resp) {
				if (resp.data.status === 'ok') {
					vm.$message({
						message: "移除黑名单成功!",
						type: 'success',
						center: true
					})
          vm.total = 0
          vm.currentPage = 1
					vm.getBanUserList();
				}else {
					vm.$message({
						message: "移除黑名单失败,请稍后重试!",
						type: 'error',
						center: true
					})
				}
			})
    },
    removeById(blackId) {
			var vm = this
      vm.deleteId = blackId
    },
    formatter(row, column) {
      return row.date
    },
    getBanUserList() {
      var vm = this
      this.axios({
        method: 'GET',
        url: vm.baseUrl2 + 'banPage',
        params: { 'currentPage' : vm.currentPage, 'pageSize' : vm.pageSize}
      }).then(function(resp) {
      	if (vm.total === 0){
					vm.banUserDtoList = resp.data.data.list
        }else {
					vm.banUserTempList = resp.data.data.list
					vm.banUserDtoList = vm.banUserDtoList.concat(vm.banUserTempList)
        }
        vm.total = resp.data.data.total
        vm.loading = false
				vm.bottomLoading = false
      })
    }
  }
}
</script>

<style scoped>
  #checkBox{
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>
